<template>
  <div class="report-table" style="width: 100%; height: 100%; overflow: auto;">
    <el-table
      :data="data"
      :border="config.border"
      :stripe="config.stripe"
      style="width: 100%"
      :max-height="config.height - 20"
    >
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        align="center"
      />
    </el-table>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  config: {
    type: Object,
    required: true
  },
  data: {
    type: Array,
    default: () => []
  }
})

const columns = computed(() => {
  if (props.data.length === 0) return []
  
  const firstRow = props.data[0]
  return Object.keys(firstRow).map(key => ({
    prop: key,
    label: getColumnLabel(key),
    width: 120
  }))
})

const getColumnLabel = (key) => {
  const labelMap = {
    date: '日期',
    amount: '金额',
    quantity: '数量',
    product: '产品',
    stock: '库存',
    value: '价值',
    customer: '客户',
    supplier: '供应商'
  }
  return labelMap[key] || key
}
</script>

<style scoped>
.report-table {
  padding: 8px;
  box-sizing: border-box;
}
</style>
